import React from 'react'
import {Card,Form,Button,Input,Checkbox,Radio,Select,Switch,DatePicker,TimePicker,Upload,Icon,message, InputNumber} from 'antd'
import moment from 'moment';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TextArea = Input.TextArea

class FormRegister extends React.Component{

    state={}

    handleSubmit =()=>{
        let userInfo = this.props.form.getFieldsValue();
        console.log(JSON.stringify(userInfo))
        message.success(`${userInfo.userName}恭喜你,通过注册了本网站的会员,密码为${userInfo.password},`)
    }

    getBase64 = (img, callback)=>{
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }

    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            this.getBase64(info.file.originFileObj, imageUrl => this.setState({
                userImg:imageUrl,
                loading: false,
            }));
        }
    }

    render(){
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol:{
                xs:24,
                sm:4
            },
            wrapperCol:{
                xs:24,
                sm:12
            }
        }
        const offsetLayout = {
            wrapperCol:{
                xs:24,
                sm:{
                    span:12,
                    offset:4
                }
            }
        }

        const rowObject = {
            minRows: 4,maxRows: 6
        }

        return (
            <div>
                <Card title="注册表单">
                    <FormItem label="用户名" {...formItemLayout} >
                        {
                            getFieldDecorator('userName',{
                                initialValue:'',
                                rules:[
                                    {
                                        required:true,
                                        message:"用户不能为空"

                                    }
                                ]
                            })(
                                <Input placeholder="请输入用户名"/>
                            )
                        }
                    </FormItem>

                    <FormItem label="密码" {...formItemLayout} >
                        {
                            getFieldDecorator('password', {
                                initialValue: '',
                                rules: [
                                    {
                                        required:true,
                                        message:"密码不能为空"
                                    }
                                ]
                            })(
                                <Input type="password" placeholder="请输入密码"/>
                            )

                        }
                    </FormItem>

                    <FormItem label="性别" {...formItemLayout} >
                        {
                            getFieldDecorator('sex', {
                                initialValue: '1',

                            })(
                                <RadioGroup>
                                    <Radio value="1">男</Radio>
                                    <Radio value="2">女</Radio>
                                </RadioGroup>
                            )

                        }
                    </FormItem>

                    <FormItem label="年龄" {...formItemLayout} >
                        {
                            getFieldDecorator('age', {
                                initialValue: '18',

                            })(
                                <InputNumber/>
                            )

                        }
                    </FormItem>

                    <FormItem label="当前状态" {...formItemLayout} >
                        {
                            getFieldDecorator('state', {
                                initialValue: '2',

                            })(
                                <Select>
                                    <option value="1">AA</option>
                                    <option value="2">BB</option>
                                    <option value="3">CC</option>
                                    <option value="4">DD</option>
                                    <option value="5">EE</option>
                                </Select>
                            )

                        }
                    </FormItem>

                    <FormItem label="爱好" {...formItemLayout} >
                        {
                            getFieldDecorator('interest', {
                                initialValue: ['2','5'],

                            })(
                                <Select mode="multiple">
                                    <option value="1">游泳</option>
                                    <option value="2">打篮球</option>
                                    <option value="3">踢足球</option>
                                    <option value="4">跑步</option>
                                    <option value="5">爬山</option>
                                    <option value="6">骑行</option>
                                    <option value="7">桌球</option>
                                    <option value="8">麦霸</option>
                                </Select>
                            )

                        }
                    </FormItem>

                    <FormItem label="是否结婚" {...formItemLayout}>
                        {
                            getFieldDecorator('isMarried',{
                                valuePropName:'checked',
                                initialValue:true
                            })(
                                <Switch/>
                            )
                        }
                    </FormItem>

                    <FormItem label="生日" {...formItemLayout}>
                        {
                            getFieldDecorator('birthday',{
                                initialValue:moment("2019-07-17")
                            })(
                                <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"/>
                            )
                        }
                    </FormItem>

                    <FormItem label="联系地址" {...formItemLayout}>
                        {
                            getFieldDecorator('address',{
                                initialValue:'苍南县灵溪镇涌金路188号'
                            })(
                                <TextArea autosize={rowObject}/>
                            )
                        }
                    </FormItem>

                    <FormItem label="早起时间" {...formItemLayout}>
                        {
                            getFieldDecorator('time')
                            (
                                <TimePicker/>
                            )
                        }
                    </FormItem>

                    <FormItem label="头像" {...formItemLayout}>
                        {
                            getFieldDecorator('userImg')(
                                <Upload
                                    listType="picture-card"
                                    showUploadList={false}
                                    action="//jsonplaceholder.typicode.com/posts/"
                                    onChange={this.handleChange}
                                >
                                    {this.state.userImg?<img src={this.state.userImg}/>:<Icon type="plus"/>}
                                </Upload>
                            )
                        }
                    </FormItem>

                    <FormItem {...offsetLayout}>
                        {
                            getFieldDecorator('userImg')(
                                <Checkbox>我已阅读过<a href="#">协议</a></Checkbox>
                            )
                        }
                    </FormItem>
                    <FormItem {...offsetLayout}>
                        <Button type="primary" onClick={this.handleSubmit}>注册</Button>
                    </FormItem>
                </Card>

            </div>
        )
    }
}

export default Form.create()(FormRegister)